<script setup lang="ts" name="index">
import sidebar from './sidebar.vue';

import { ref, onMounted } from 'vue'
import { RouterView } from 'vue-router';

const indexWrapperRef = ref<HTMLElement | null>(null);

onMounted(() => {
    indexWrapperRef.value!.style.width = window.innerWidth + 'px';
})

</script>

<template>
    <div class="index" ref="indexRef">
        <div class="indexWrapper" ref="indexWrapperRef">
            <div class="sidebar">
                <sidebar />
            </div>
            <div class="content">
                <RouterView />
            </div>            
        </div>
    </div>
</template>

<style scoped lang="scss">
.index{
    width: 100%;
    padding-top: 60px;
    display: flex;
    justify-content: center;
    .indexWrapper{
        height: fit-content;
        display: flex;
        justify-content: space-between;
        .sidebar{
            margin: 10px;
            width: 200px;
            margin-top: 5px;
        }
        .content{
            width: calc(100% - 220px);
            height: fit-content;
        }        
    }

}
</style>